<template>
  <view
    class="page-content"
    :style="{ backgroundImage: `url(${bgImageUrl})` }"
  >
    <van-button
      class="content-button"
      style="width: 700rpx"
      block
      round
      color="#0d8d6b"
      @click="onLogin"
    >
      微信一键登录
    </van-button>
    <view class="agreement-box">
      <text
        class="no-login-text"
        @click="onNoLogin"
        >暂不登录</text
      >
    </view>
    <view class="agreement-box">
      <van-checkbox
        :value="checked"
        checked-color="#0d8d6b"
        icon-size="46rpx"
        @change="onChange"
      >
        <text class="agreement-text">我已同意</text>
      </van-checkbox>
      <text
        class="agreement-link"
        @click="agreementClick('user')"
        >《九峰茶协用户协议》</text
      >
      <text class="agreement-text">和</text>
      <text
        class="agreement-link"
        @click="agreementClick('privacy')"
        >《九峰茶协隐私协议》</text
      >
    </view>
  </view>
</template>

<script>
  import { wxLogin } from '../../api/user.js'

  export default {
    data() {
      return {
        bgImageUrl:
          'https://jiufengtea.xmtjx168.com:8090/prod-api/profile/upload/2025/06/02/bg_20250602172818A021.png',
        checked: false
      }
    },
    onLoad() {
      this.init()
    },
    methods: {
      onChange(value) {
        console.log('value: ', value)
        this.checked = value.detail
      },
      init() {
        const token = uni.getStorageSync('token') || ''
        if (token) {
          uni.redirectTo({
            url: '/pages/home/index'
          })
        }
      },
      onLogin() {
        if (!this.checked) {
          uni.showToast({
            title: '请先同意用户协议和隐私协议',
            duration: 2000,
            icon: 'none'
          })
          return
        }
        wx.login({
          success: (res) => {
            if (res.code) {
              wx.getUserInfo({
                desc: '获取您的个人信息用于登录',
                success: (userRes) => {
                  const params = {
                    code: res.code,
                    encryptedData: userRes.encryptedData,
                    iv: userRes.iv
                  }
                  wxLogin(params)
                    .then((res) => {
                      const { token, user } = res.data || {}
                      console.log('请求成功:', res.data)
                      // sessionKey
                      uni.setStorageSync('token', token)
                      uni.setStorageSync('user', user)

                      setTimeout(() => {
                        uni.reLaunch({
                          url: '/pages/home/index'
                        })
                      }, 500)
                    })
                    .catch((err) => {
                      console.error('请求失败:', err)
                    })
                },
                fail: () => {}
              })
            } else {
              uni.showToast({
                title: `errMsg${res.errMsg};code-->${res.code};`,
                duration: 5000
              })
            }
          },
          fail: (err) => {
            uni.showToast({
              title: `fail-->${err};`,
              duration: 5000
            })
          }
        })
      },
      agreementClick(type) {
        uni.navigateTo({
          url: `/pages/index/agreement?type=${type}`
        })
      },
      onNoLogin() {
        uni.reLaunch({
          url: '/pages/home/index'
        })
      }
    }
  }
</script>

<style lang="scss">
  .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-size: 100% auto; /* 宽度100%，高度按比例自适应 */
    background-repeat: no-repeat;
  }
  .content-button {
    width: 700rpx;
    margin-top: 55vh;
    .van-button__text {
      font-size: 32rpx;
    }
  }
  .agreement-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30rpx;
    padding: 16rpx 24rpx;
    /* background-color: rgba(255, 255, 255, 0.8); */
    border-radius: 40rpx;
    backdrop-filter: blur(5px);
    /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); */

    .agreement-text {
      font-size: 28rpx;
      color: #666;
      margin: 0 4rpx;
    }

    .agreement-link {
      color: rgba(0, 143, 245, 1);
      font-size: 28rpx;
      text-decoration: none;
      margin: 0 4rpx;
      position: relative;

      /* &::after {
      content: "";
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 2rpx;
      background-color: rgba(0, 143, 245, 1);
      opacity: 0.7;
    } */
    }
    .no-login-text {
      font-size: 32rpx;
      color: #0d8d6b;
    }
  }
</style>
